import React from 'react';
import './App.css';
import Tablecomp from './components/tablecomp.tsx';

function App() {
  const list = [
    {
      id: 1,
      name: 'sdf',
      position: '上海北京',
      user: 'zhangsan',
      createtime: '2024-10-10 20:00:00',
      updatetime: '2024-10-10 20:00:00',
      desc: 'safdasdfasdfasdfasdf',
      remark: 'asdfasdfsdafassafdfafdsaf',
    },
    {
      id: 2,
      name: 'gsgs',
      position: '南京',
      user: 'wangwu',
      createtime: '2024-10-10 20:00:00',
      updatetime: '2024-10-10 20:00:00',
      desc: 'safdasdfasdfasdfasdf',
      remark: 'asdfasdfsdafassafdfafdsaf',
    },
    {
      id: 3,
      name: 'gdfg',
      position: '杭州',
      user: 'wangwu',
      createtime: '2024-10-10 20:00:00',
      updatetime: '2024-10-10 20:00:00',
      desc: 'safdasdfasdfasdfasdf',
      remark: 'asdfasdfsdafassafdfafdsaf',
    },
    {
      id: 4,
      name: 'dndn',
      position: '南京',
      user: 'lisi',
      createtime: '2024-10-10 20:00:00',
      updatetime: '2024-10-10 20:00:00',
      desc: 'safdasdfasdfasdfasdf',
      remark: 'asdfasdfsdafassafdfafdsaf',
    },
    {
      id: 5,
      name: 'gdsfg',
      position: '南京',
      user: 'lisi',
      createtime: '2024-10-10 20:00:00',
      updatetime: '2024-10-10 20:00:00',
      desc: 'safdasdfasdfasdfasdf',
      remark: 'asdfasdfsdafassafdfafdsaf',
    },
    {
      id: 6,
      name: 'jhshf',
      position: '上海北京',
      user: 'zhangsan',
      createtime: '2024-10-10 20:00:00',
      updatetime: '2024-10-10 20:00:00',
      desc: 'safdasdfasdfasdfasdf',
      remark: 'asdfasdfsdafassafdfafdsaf',
    },
    {
      id: 7,
      name: 'sdfh',
      position: '南京',
      user: 'zhangsan',
      createtime: '2024-10-10 20:00:00',
      updatetime: '2024-10-10 20:00:00',
      desc: 'safdasdfasdfasdfasdf',
      remark: 'asdfasdfsdafassafdfafdsaf',
    },
    {
      id: 8,
      name: 'sdfgdfg',
      position: '杭州',
      user: 'lisi',
      createtime: '2024-10-10 20:00:00',
      updatetime: '2024-10-10 20:00:00',
      desc: 'safdasdfasdfasdfasdf',
      remark: 'asdfasdfsdafassafdfafdsaf',
    },
    {
      id: 9,
      name: 'dsklgf',
      position: '上海北京',
      user: 'zhangsan',
      createtime: '2024-10-10 20:00:00',
      updatetime: '2024-10-10 20:00:00',
      desc: 'safdasdfasdfasdfasdf',
      remark: 'asdfasdfsdafassafdfafdsaf',
    },
    {
      id: 10,
      name: 'odfg',
      position: '上海北京',
      user: 'wangwu',
      createtime: '2024-10-10 20:00:00',
      updatetime: '2024-10-10 20:00:00',
      desc: 'safdasdfasdfasdfasdf',
      remark: 'asdfasdfsdafassafdfafdsaf',
    },
    {
      id: 11,
      name: 'dlgs',
      position: '杭州',
      user: 'lisi',
      createtime: '2024-10-10 20:00:00',
      updatetime: '2024-10-10 20:00:00',
      desc: 'safdasdfasdfasdfasdf',
      remark: 'asdfasdfsdafassafdfafdsaf',
    },
    {
      id: 13,
      name: 'sdfgsd',
      position: '杭州',
      user: 'wangwu',
      createtime: '2024-10-10 20:00:00',
      updatetime: '2024-10-10 20:00:00',
      desc: 'safdasdfasdfasdfasdf',
      remark: 'asdfasdfsdafassafdfafdsaf',
    },
    {
      id: 14,
      name: 'sdfgsd',
      position: '杭州',
      user: 'wangwu',
      createtime: '2024-10-10 20:00:00',
      updatetime: '2024-10-10 20:00:00',
      desc: 'safdasdfasdfasdfasdf',
      remark: 'asdfasdfsdafassafdfafdsaf',
    },
    {
      id: 15,
      name: 'sdfgsd',
      position: '杭州',
      user: 'wangwu',
      createtime: '2024-10-10 20:00:00',
      updatetime: '2024-10-10 20:00:00',
      desc: 'safdasdfasdfasdfasdf',
      remark: 'asdfasdfsdafassafdfafdsaf',
    },
    {
      id: 16,
      name: 'sdfgsd',
      position: '杭州',
      user: 'wangwu',
      createtime: '2024-10-10 20:00:00',
      updatetime: '2024-10-10 20:00:00',
      desc: 'safdasdfasdfasdfasdf',
      remark: 'asdfasdfsdafassafdfafdsaf',
    },
    {
      id: 17,
      name: 'sdfgsd',
      position: '杭州',
      user: 'wangwu',
      createtime: '2024-10-10 20:00:00',
      updatetime: '2024-10-10 20:00:00',
      desc: 'safdasdfasdfasdfasdf',
      remark: 'asdfasdfsdafassafdfafdsaf',
    }
  ];
  const columns = [
    {
      prop: 'id',
      width: '100',
      label: 'ID'
    },
    {
      prop: 'name',
      width: '100',
      label: '名字'
    },
    {
      prop: 'position',
      width: '150',
      label: '位置'
    },
    {
      prop: 'user',
      width: '100',
      label: '用户'
    },
    {
      prop: 'createtime',
      width: '200',
      label: '创建时间'
    },
    {
      prop: 'updatetime',
      width: '200',
      label: '更新时间'
    },
    {
      prop: 'desc',
      width: '300',
      label: '描述'
    },
    {
      prop: 'remark',
      width: '300',
      label: '备注'
    }
  ];
  return (
    <div className="App">
      {/* <div style={{
            position: 'relative'
        }}>
      <div style={{
            width: '100px',
            height:'100px',
            overflow:'scroll',
            backgroundColor:'red'
        }}>
            <div style={{
                position: 'absolute',
                zIndex: 1,
                top: 0,
                left: 0
            }}>
                123
            </div>
            <div style={{
                height: '500px'
            }}>
                22222,
                2321321
            </div>
        </div>
        </div> */}
      <Tablecomp
        fixHead={true}
        fixLeftCol={1}
        fixRightCol={1}
        columns={columns}
        list={list} />
    </div>
  );
}

export default App;
